<template>
    <BoxBorder13
        :colors='["#6586ec" ,"#2cf7fe"]'
        class='bigDataCard'
    >
        <div class='header'>
            <div class='title'>年度履职同比趋势</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class='body' ref='bodyRef'>
            <VChart ref='chartRef' :option='mapOptions' :style='{ height: height }'/>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from 'guodu-data-panel';
import {useTemplateRef} from 'vue';
import VChart from 'vue-echarts';
import * as echarts from 'echarts/core';
import {GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getSendPoliceTrendOfSendPolice} from "@/api/StatisticAnalysis/CityResumptionChart.js";
import dayjs from "dayjs";

const value = ref('江苏省院');

const bodyRef = useTemplateRef('bodyRef')
const height = ref('')

const mapOptions = ref({})

echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

const entries = Array.from({length: 12}, (_, i) => [i + 1, 0]);
const total = ref(entries.reduce((acc, [key, value]) => ({...acc, [key]: value}), {}));


const deptId = ref(0)
let intervalId;
onMounted(() => {
    nextTick(() => {
        height.value = bodyRef.value.clientHeight
    });
    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId)
    }
})

const getData = async () => {
    const res = await getSendPoliceTrendOfSendPolice({
        unitId: deptId.value
    });
    if (res.data.length > 0) {
        res.data.forEach(item => {
            if (total.value.hasOwnProperty(item.months)) total.value[item.months] = item.counts;
        });
    } else {
        total.value = entries.reduce((acc, [key, value]) => ({...acc, [key]: value}), {});
    }
    // console.log(Object.values(total.value))
    setChartOptions(Object.values(total.value))
}
const changeDeptHandle = () => {
    getData()
}

const setChartOptions = (seriesData) => {
    mapOptions.value = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: 0,
            right: 10,
            top: 30,
            bottom: 0,
            containLabel: true
        },
        legend: {
            right: 0,
            data: ['2023', '2024'],
            textStyle: {
                color: '#fff',
                fontSize: '12'
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    color: '#2cf7fe'
                }
            }
        ],
        yAxis: {
            type: 'value',
            splitLine: {
                show: false,
            },
            axisLabel: {
                color: '#2cf7fe'
            }
        },

        series: [
            {
                name: dayjs().format('YYYY'),
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            // color: '#F76560'
                            color: '#57A9FB'
                        },
                        {
                            offset: 1,
                            color: '#C3E7FE'
                            // color: '#FDCDC5'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: seriesData
            },
            // {
            //     name: '2024',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     lineStyle: {
            //         width: 0
            //     },
            //     showSymbol: false,
            //     label: {
            //         show: true,
            //         position: 'top'
            //     },
            //     areaStyle: {
            //         opacity: 0.8,
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //             {
            //                 offset: 0,
            //                 color: '#57A9FB'
            //             },
            //             {
            //                 offset: 1,
            //                 color: '#C3E7FE'
            //             }
            //         ])
            //     },
            //     emphasis: {
            //         focus: 'series'
            //     },
            //     data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
            // }
        ]
    }
}
</script>

<style scoped lang='scss'>

</style>